<template>
  <div class="customer-stats">
    <!-- 标题 -->
    <CustAnalysisTitle
      :title="title"
      :tips="tips"
    />
    <!-- 总览 -->
    <CustAnalysisOverview :overview-data="overviewData" />
    <!-- 图表 -->
    <div class="chart">
      <div class="charts-title">
        <div
          v-for="(item,index) in sumData"
          :key="item"
          class="charts-title-item"
        >
          <div
            :style="{background: lineStyle[index].normal.lineStyle.color}"
            class="line"
          />
          <span>{{ item }}</span>
        </div>
      </div>
      <common-chart
        v-if="statasChart.show"
        :options="statasChart.options"
        style="width: 100%; height: 300px"
      />
    </div>
  </div>
</template>

<script setup>
import CustAnalysisTitle from './cust-analysis-title.vue'
import CustAnalysisOverview from './cust-analysis-overview.vue'

const props = defineProps({
  timeData: {
    type: Object,
    default: null
  }
})

const lineStyle = [
  {
    normal: {
      color: '#29CB97',
      lineStyle: {
        color: '#29CB97'
      }
    }
  },
  {
    normal: {
      color: '#0058FF',
      lineStyle: {
        color: '#0058FF'
      }
    }
  },
  {
    normal: {
      color: '#F56C6C',
      lineStyle: {
        color: '#F56C6C'
      }
    }
  }
]
const areaStyle = [
  {

    colorType: 'LinearGradient',
    colorOption: {
      direction: [0, 0, 0, 1],
      color: [
        { offset: 0, color: 'rgba(41, 203, 151, 0.41)' },
        { offset: 1, color: '#ffffff' }
      ]
    }
  },
  {

    colorType: 'LinearGradient',
    colorOption: {
      direction: [0, 0, 0, 1],
      color: [
        { offset: 0, color: 'rgba(24,144,255,0.6)' },
        { offset: 1, color: '#ffffff' }
      ]
    }
  },
  {

    colorType: 'LinearGradient',
    colorOption: {
      direction: [0, 0, 0, 1],
      color: [
        { offset: 0, color: '#F56C6C' },
        { offset: 1, color: '#ffffff' }
      ]
    }
  }
]
onMounted(() => {
  initOverviewData()
})
let dateValue = ''
let dateRange = []

watch(() => props.timeData, () => {
  dateValue = props.timeData.dateValue
  dateRange = props.timeData.dateRange
  getCustSurvey()
}, { deep: true })
/**
 * 初始化数据
 */
// 总览信息

const overviewData = ref({
  title: [],
  num: [],
  type: 1,
  rate: []
})
const tips = ref('') // 提示
const title = ref('') // 标题
const initOverviewData = () => {
  title.value = $t('dataAnalysis.customerProfile')
  tips.value = $t('dataAnalysis.customerTips')

  overviewData.value = {
    title: [$t('dataAnalysis.numberOfVisitors'), $t('dataAnalysis.cumulativePaid'), $t('dataAnalysis.cumulativeNumberOfMembers'), $t('dataAnalysis.customersTraded')],
    num: ['0', '0', '0', '0'],
    type: 1,
    rate: ['0', '0', '0', '0']
  }
}
/**
 * 初始化一个obj
 */
const initObj = (name) => {
  const obj = {}
  obj.name = name
  obj.type = 'line'
  // obj.stack = '总量'
  obj.smooth = true
  obj.data = []
  return obj
}
/**
 * 获取商品概况数据
 */
let dateArr = []// 趋势图时间数组
let seriesDataArr = [] // 所有数据

const getCustSurvey = () => {
  http({
    url: http.adornUrl('/admin/customerAnalysis/getCustomerAnalysis'),
    method: 'get',
    params: http.adornParams(
      {
        dateType: dateValue,
        startTime: dateRange[0],
        endTime: dateRange[1]
      }
    )
  }).then(({ data }) => {
    if (data) {
      // 概况信息赋值
      overviewData.value.type = dateValue
      overviewData.value.num = [data.visitor, data.fashNum, data.member, data.payNum]
      overviewData.value.rate = [data.visitorRate, data.fashNumRate, data.memberRate, data.payNumRate]

      // 图表信息赋值
      dateArr = []
      seriesDataArr = []
      const obj1 = initObj($t('dataAnalysis.numberOfVisitors'))
      const obj2 = initObj($t('dataAnalysis.newPaidMember'))
      const obj4 = initObj($t('dataAnalysis.customersTraded'))

      data.customerTrend.forEach(i => {
        dateArr.push(i.currentDay)
        obj1.data.push(i.visitor)
        obj2.data.push(i.fashNum)
        obj4.data.push(i.payNum)
      })

      seriesDataArr.push(obj1)
      seriesDataArr.push(obj2)
      seriesDataArr.push(obj4)
      let i = 0
      seriesDataArr.forEach(item => {
        item.itemStyle = lineStyle[i]
        item.areaStyle = areaStyle[i]
        i++
      })
      getCouponChart()
    }
  })
}
/**
 * 生成图表
 */
const sumData = ref([])
const statasChart = reactive({
  options: {},
  show: false
})
const getCouponChart = () => {
  sumData.value = []
  seriesDataArr.forEach(item => {
    sumData.value.push(item.name)
  })
  statasChart.options = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: '#fff',
      padding: 8,
      textStyle: { // 提示框浮层的文本样式。
        fontSize: '12px',
        fontWeight: 400,
        color: '#33333',
        opacity: 1,
        lineHeight: '20px'
      },
      extraCssText: 'box-shadow:0px 1px 11px rgba(213, 220, 226, 0.73);'
    },
    grid: {
      top: '50px',
      left: '50px',
      right: '50px',
      bottom: '50px'
    },
    legend: [],
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: dateArr,
      axisLine: {
        lineStyle: {
          color: '#999'
        }
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      axisLine: { show: false },
      axisTick: { show: false }
    },
    series: seriesDataArr
  }
  statasChart.show = true
}

</script>

<style lang="scss" scoped>
.customer-stats {
  .chart {
    margin-top: 20px;
  }
}
.charts-title {
  width: 100%;
  display: flex;
  justify-content: center;
}
.charts-title .charts-title-item .line {
  width: 18px;
  height: 8px;
  opacity: 1;
  border-radius: 8px;
  margin-right: 10px;
}
.charts-title .charts-title-item {
  margin-right: 40px;
  color: #999999;
  font-size: 12px;
  display: flex;
  align-items: center;
  height: 20px;
}
</style>
